<template>
  <section class="statistic-card">
    <section class="title">{{ title }}</section>
    <section class="data">
      <span class="num">{{ value }}</span>
      <span class="per-unit">{{ perUnit }}</span>
    </section>
  </section>
</template>
<script setup lang="ts">
defineProps<{
  title: string
  value: number
  perUnit: string
}>()
</script>
<style scoped>
.statistic-card {
  color: white;
  font-family: 'Arial-bold';
  text-align: center;
  .title {
    font-size: 18px;
    color: #d7d7d7;
  }
  .data {
    margin-top: 8%;
  }
}

.num {
  font-size: 36px;
}

.per-unit {
  font-size: 20px;
}
</style>
